<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    
<!DOCTYPE html>
<html>
<head>
<<title>左下家居创意设计官网</title> ﻿
<meta charset="UTF-8">
<link rel="alternate icon" type="image/png" href="images/favicon.png">
<link rel='icon' href='favicon.ico' type='image/x-ico' />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/default.min.css?t=227" />
<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="lib/handlebars/handlebars.min.js"></script>
<script type="text/javascript" src="lib/iscroll/iscroll-probe.js"></script>
<script type="text/javascript" src="lib/amazeui/amazeui.min.js"></script>
<script type="text/javascript" src="lib/raty/jquery.raty.js"></script>
<script type="text/javascript" src="js/main.min.js?t=1"></script>
</head>
<body>

<!--	<div id="head"></div>-->
<!--	<script type="text/javascript">-->
<!--		$('#head').load('head.html')-->
<!--	</script>-->

<!-- TODO 替换为head.html -->
<div class="header-top" >
	<div class="width-center">
		<div class="header-logo ">
			<img src="images/zuoxialogo.jpg" height="100px" width="100px">
		</div>
		<div class="header-title div-inline">
			<strong>左下家居</strong> <span>zuoxiajiaju</span>
		</div>
		<div class="search-box div-inline">
			<div class="input-box">
				<input type="text" name="" id="newT" value="" placeholder="请输入关键字">
			</div>
			<div class="search-botton" onclick=""></div>
		</div>
	</div>
</div>
<div class="header-nav">
	<button class="am-show-sm-only am-collapsed font f-btn"
			data-am-collapse="{target: '.header-nav'}">
		Menu <i class="am-icon-bars"></i>
	</button>
	<nav>
		<ul class="header-nav-ul am-collapse am-in">
		<li class="on"><a href="IndexServlet?reqName=toIndex" name="index">首页</a></li>
			<li><a href="AboutServlet?reqName=toAbout" name="about">关于我们</a></li>
			<li><a href="ProductServlet?reqName=toProductlist&pteid=1" name="show">案例展示</a></li>
			<li><a href="NewsServlet?reqName=tonews" name="new">新闻资讯</a></li>
			<li><a href="LxServlet?reqName=toContact" name="message">联系我们</a>
				<div class="secondary-menu">
					<ul>
						<li><a href="message.jsp" class="message"></a></li>
					</ul>
				</div>
			</li>
		</ul>
	</nav>
</div>
<!-- header end -->

	<section class="pro-list">
		<aside class="pro-leftsidebar">
			<ul>
				<li>
					<a>产品搜索</a>
					<ul id="pro-search">
						<li>
							<input type="text" style="color: white;" name=newsTitle id="newT" value="" class="pro-search">
							<a class="pro-search-btn" onclick="">搜索</a>
						</li>
					</ul>
				</li>
				<li><a>产品分类</a>
					 <ul id="pro-category">
						<!-- <li class="">
							<a href="#">椅子系列</a>
						</li>
						<li class="">
							<a href="#">餐桌系列</a>
						</li>
						<li class="on">
							<a href="#">沙发系列</a>
						</li>
						<li class="">
							<a href="#">创意系列</a>
						</li> -->
						
						<c:forEach items="${protypeList }" var="t">
						<c:choose>
							<c:when test="${pteid == t.pteid }">
								<li class="on">
									<a href="ProductServlet?reqName=toProductlist&pteid=${t.pteid }">${t.ptename }</a>
								</li>
							</c:when>
							<c:otherwise>
							<li class="">
								<a href="ProductServlet?reqName=toProductlist&pteid=${t.pteid }">${t.ptename }</a>
							</li>
							
							</c:otherwise>
						</c:choose>
						</c:forEach>
						
					</ul> 
					
				</li>
			</ul>
		</aside>

		<aside class="pro-rightsidebar">
			<header>
				<p></p>
				<span>产品详情</span>
				<div class="product-nav">
					<a href="#">首页 </a>&#62;<a href="#">案例展示</a>&#62;
				</div>
			</header>
			<main>
				<div class="pro-right-left">
					<div class="pro-details-img">
						<img src="images/${product.prodefauiimg }">
					</div>
					<div class="pro-detalis-carousel">
						<div class="am-slider am-slider-default am-slider-carousel"
							 data-am-flexslider="{itemWidth: 112, itemMargin: 4,move:5,  controlNav: false ,  slideshow: true}">
							<ul class="am-slides pro-details">
								<!-- <li><img src="images/沙发1.jpg"></li>
								<li><img src="images/沙发2.jpg"></li>
								<li><img src="images/沙发3.jpg"></li>
								<li><img src="images/沙发4.jpg"></li>
								<li><img src="images/沙发5.jpg"></li>
								<li><img src="images/沙发6.jpg"></li>
								<li><img src="images/沙发7.jpg"></li> -->
								
								<c:forEach items="${ProimgList }" var="i">
								<li><img src="images/${i.proimgurl }"></li>
								</c:forEach>
							</ul>
						</div>
					</div>
				</div>
				<div class="pro-right-right">
					<ul class="pro-right-info-constant">
						<li>产品名称:</li>
						<li>产品材质:</li>
						<li>产品售价:</li>
						<li>市场价:</li>
					</ul>
					<ul class="pro-right-info-variable">
						<li>${product.proname }</li>
						<li>${product.promaterial }</li>
						<li>${product.proprice }</li>
						<li>${product.proprice }</li>
					</ul>
				</div>

				<div class="am-tabs pro-tabs" data-am-tabs>
					<ul class="am-tabs-nav am-nav am-nav-tabs">
						<li class="am-active"><a href="#tab1">详细说明1</a></li>
						 <li><a href="#tab2">详细说明2</a></li>
						<li><a href="#tab3">详细说明3</a></li>
						<li><a href="#tab4">详细说明4</a></li> 
						
					</ul>

					<div class="am-tabs-bd">
						<div class="am-tab-panel am-active" id="tab1">
							<ul>
								<li><span class="pro-tabs-constant">库存:</span> <span
									class="pro-tabs-variable">${product.prostock }</span></li>
								<li><span class="pro-tabs-constant">产地:</span> <span
									class="pro-tabs-variable">${product.proplace }</span></li>
								<li><span class="pro-tabs-constant">材料:</span> <span
									class="pro-tabs-variable">${product. proshell}</span></li>
								
							</ul>
						</div>
						<div class="am-tab-panel" id="tab2"></div>
						<div class="am-tab-panel" id="tab3"></div>
						<div class="am-tab-panel" id="tab4"></div>
					</div>
				</div>
			</main>
		</aside>


	</section>

<!--	<div id="foot"></div>-->
<!--	<script type="text/javascript">-->
<!--		$('#foot').load('foot.html')-->
<!--	</script>-->

<!-- TODO 替换为foot.html -->

<div>
	<div class="footer-info">
		<div class="footer-content">
			<img src="images/qccode.png" alt="">
			<div>
				<p></p>
				<div class="footer-box">
					<i class="icon-tel"></i>
					<span>公司电话:</span>
					<span>400-921-3900</span>
				</div>
				<div class="footer-box">
					<i class="icon-email"></i>
					<span>公司邮箱:</span>
					<span>4009213900@qq.com</span>
				</div>
				<div class="footer-box">
					<i class="icon-address"></i>
					<span>公司地址:</span>
					<span>河南省驻马店市驿城区驻马店职业技术学院</span>
				</div>
			</div>
		</div>
	</div>
	<style>
		.footer-bottom a{color:#F1404B}
	</style>
	<div class="footer-bottom"><div style="text-align:center;color:#fff;line-height:100px;"><span><a href="http://www.ysd3g.com/" target="_blank" title="好主题">云时代</a>提供 - More Templates <a href="http://www.ysd3g.com/" target="_blank" title="更多信息">更多信息</a> </span></div></div>
</div>

<!-- foot end -->

	<script type="text/javascript">
	function selectByTitle(){
		var newsT = document.getElementById("newT").value;
		window.location.href = "ProductDetailsServlet?method=selectByTitle&newsTitle="+newsT;
	}
	</script>
</body>

</html>